<template>
  <div class="categroyMan">
    <mytopfun title="栏目管理">
      <van-icon name="arrow-left" slot="left" @click="$router.go(-1)" />
      <van-icon name="home-o" slot="right" style="visibility: hidden" />
    </mytopfun>
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span
          v-for="(item, i) in cateList"
          :key="i"
          @click="removeList(item, i)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span v-for="(v, i) in addList" :key="i" @click="addcateList(v, i)">{{
          v.name
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// 引头部
import mytopfun from "@/components/mytopfun";
import { categroyList } from "../apis/category";
export default {
  components: {
    mytopfun,
  },
  data() {
    return {
      cateList: [],
      addList: [],
    };
  },
  methods: {
    // 点击删除栏目
    removeList(item, i) {
      // 点击就没有了
      this.cateList.splice(i, 1);
      this.addList.unshift(item);
      // 再存到本地存储
      window.localStorage.setItem(
        "toutiao_cateList",
        JSON.stringify(this.cateList)
      );
      window.localStorage.setItem(
        "toutiao_addList",
        JSON.stringify(this.addList)
      );
    },
    // 点击增加栏目
    addcateList(v, i) {
      this.addList.splice(i, 1);
      this.cateList.unshift(v);
      // 再存到本地存储
      window.localStorage.setItem(
        "toutiao_cateList",
        JSON.stringify(this.cateList)
      );
      window.localStorage.setItem(
        "toutiao_addList",
        JSON.stringify(this.addList)
      );
    },
  },
  async mounted() {
    // 先看下本地存储有没有分类数据
    if (window.localStorage.getItem("toutiao_cateList")) {
      this.cateList = JSON.parse(
        window.localStorage.getItem("toutiao_cateList")
      );
      this.addList = JSON.parse(window.localStorage.getItem("toutiao_addList"));
    } else {
      // 第一次进入先获取所有栏目
      let res = await categroyList();
      console.log(res);
      this.cateList = res.data.data;
      // 处理对象数组，判断是否有登录就把关注和头条剔除，没有登录吧头条剔除
      if (window.localStorage.getItem("toutiao_token")) {
        this.cateList = this.cateList.slice(2);
      } else {
        this.cateList = this.cateList.slice(1);
      }
      // 再把数据存到本地存储
      window.localStorage.setItem(
        "toutiao_cateList",
        JSON.stringify(this.cateList)
      );
      window.localStorage.setItem(
        "toutiao_addList",
        JSON.stringify(this.addList)
      );
    }
  },
};
</script>

<style lang="less" scoped>
.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
  }
  .list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    > span {
      width: 20%;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>